<html>
<head>
<title>TimeShow</title>
<style>
<!--
	.tabus{
		 CURSOR: hand;HEIGHT: '100%';TEXT-ALIGN: center; WIDTH: '100%';BACKGROUND-COLOR: #fafafa;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
	}
	.tabse{
		 CURSOR: default;HEIGHT: '100%';TEXT-ALIGN: center; WIDTH: '100%';BACKGROUND-COLOR: transparent;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 0px solid
	}
	.tabspace{
		 BACKGROUND-COLOR:transparent;HEIGHT: '100%';TEXT-ALIGN: center; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
	}
	.win{
		HEIGHT:'100%';BACKGROUND-COLOR: transparent;BORDER-RIGHT: 1px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid		
	}
	.usop{
		VISIBILITY: hidden;position:absolute;HEIGHT: 1px;WIDTH: 1px; OVERFLOW: hidden;
	}
	.seop{
		visibility:visible;position:relative;
	}
	.blime{
		BORDER-LEFT-COLOR: lime; BORDER-BOTTOM-COLOR: lime; WIDTH: 99%; BORDER-TOP-COLOR: lime; HEIGHT: 24px; BACKGROUND-COLOR: white; FONT-VARIANT: small-caps; BORDER-RIGHT-COLOR: lime
	}
	.borange{
		BORDER-LEFT-COLOR: orange; BORDER-BOTTOM-COLOR: orange; WIDTH: 99%; BORDER-TOP-COLOR: orange; HEIGHT: 24px; BACKGROUND-COLOR: white; FONT-VARIANT: small-caps; BORDER-RIGHT-COLOR: orange
	}
	.byellow{
		BORDER-LEFT-COLOR: yellow; BORDER-BOTTOM-COLOR: yellow; WIDTH: 99%; BORDER-TOP-COLOR: yellow; HEIGHT: 24px; BACKGROUND-COLOR: white; FONT-VARIANT: small-caps; BORDER-RIGHT-COLOR: yellow
	}
	.bred{
		BORDER-LEFT-COLOR: red; BORDER-BOTTOM-COLOR: red; WIDTH: 99%; BORDER-TOP-COLOR: red; HEIGHT: 24px; BACKGROUND-COLOR: white; FONT-VARIANT: small-caps; BORDER-RIGHT-COLOR: red
	}
	.bgreen{
		BORDER-LEFT-COLOR: green; BORDER-BOTTOM-COLOR: green; WIDTH: 99%; BORDER-TOP-COLOR: green; HEIGHT: 24px; BACKGROUND-COLOR: white; FONT-VARIANT: small-caps; BORDER-RIGHT-COLOR: green
	}
	.bblue{
		BORDER-LEFT-COLOR: blue; BORDER-BOTTOM-COLOR: blue; WIDTH: 99%; BORDER-TOP-COLOR: blue; HEIGHT: 24px; BACKGROUND-COLOR: white; FONT-VARIANT: small-caps; BORDER-RIGHT-COLOR: blue
	}
	.subwin{
		cursor:default;visibility: HIDDEN;BORDER-RIGHT: black 1px solid; BORDER-TOP: silver 1px solid; OVERFLOW-Y: auto; BACKGROUND-COLOR: ivory; FONT-SIZE: smaller; FILTER: alpha(opacity=35); moz-opacity: .35 ; LEFT: 175px; BORDER-LEFT: silver 1px solid; WIDTH: 159px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 21px; HEIGHT: ; z-order: 1e+10
	}
	.playdo{
		filter: Glow(color=white, strength=6);BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-LEFT-COLOR: transparent; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; BORDER-BOTTOM-COLOR: transparent; BORDER-TOP-COLOR: transparent; BORDER-RIGHT-WIDTH: 0px; BORDER-RIGHT-COLOR: transparent;
	}
	.cpanel{
		BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; OVERFLOW-Y: hidden; FONT-SIZE: smaller; FILTER: alpha(opacity=35); moz-opacity: .35; LEFT: 23px; BORDER-LEFT: red 1px solid; WIDTH: 132px; BORDER-BOTTOM: red 1px solid; POSITION: absolute; TOP: 23px; z-order: 1e+10
	}
-->
</style>
<!--[if IE]><script type="text/javascript" src="source/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="source/wz_jsgraphics.js"></script>
<script type="text/javascript" src="source/event.js"></script>
<script type="text/javascript" src="source/menudrag.js"></script>
<script type="text/javascript" src="source/tsfilter.js"></script>
<script language="JavaScript">
function help(){
	messwin.innerHTML="In Construction";
}
function backgroundACT(val){
	myframed.document.body.background=val;
}
function backgroundACT1(val){
	myframed.document.body.bgColor=val;
}
function background(){
	document.getElementById("bgpanel").style.visibility="visible";
}
var PreAnim = {
	obj : null,mx : null,
	filter : null,
	top : null,
	left : null,
	height : null,
	width : null,
	loadStep : function (){
		var selector = PreAnim.selector;
		if(selector.value>0){
			try {
				var s = parseInt(selector.value);
				var y = PreAnim.mx.steps[s];
				PreAnim.filter.value=(y.filter)?y.filter:"";
				PreAnim.top.value = y.dy;
				PreAnim.left.value = y.dx;
				PreAnim.height.value = y.dh;
				PreAnim.width.value = y.dw;
			}catch(e){errors.record(e,"PreAnim->loadStep SUGAR");}
		}else{
			with(PreAnim){
				filter.value = (mx.vi)?'Visible':'Invisible';
				top.value = mx.ory;
				left.value = mx.orx;
				height.value = mx.orh;
				width.value = mx.orw;
			}
		}
	},
	init : function (tobj){
		var TimeShow=myframed.TimeShow;
		PreAnim.obj = tobj;
		try{
			var mx = TimeShow.movements[tobj.oid-1];
			mx.index;mx.steps.length;
		}catch(e){
			var mx = { index : 0, steps : Array()};
		}
		PreAnim.mx = mx;
		var we = {
			id : tobj.id,
			html : tobj.innerHTML,
			ts : mx.index,
			size : mx.steps.length
		}
		try {

			PreAnim.filter = document.getElementById("THfilter");
			PreAnim.top = document.getElementById("THtop");
			PreAnim.left = document.getElementById("THleft");
			PreAnim.height = document.getElementById("THheight");
			PreAnim.width = document.getElementById("THwidth");
			
			PreAnim.selector = document.getElementById("THcounter");
			var selector = PreAnim.selector;
			
			document.getElementById("THobid").value=we.id;
			document.getElementById("THihtml").value=we.html;
			document.getElementById("THts").value=we.ts;
			document.getElementById("THlng").value=we.size;
			
			try{
				with(PreAnim){
					filter.value = (mx.vi)?'Visible':'Invisible';
					top.value = mx.ory;
					left.value = mx.orx;
					height.value = mx.orh;
					width.value = mx.orw;
				}
			}catch(e){errors.record(e,"PreAnim->init setvals");}
		}catch(e){errors.record(e,"PreAnim->init getObjects");}
		
		try {
			selector.innerHTML="";
			selector.onchange = new Function("PreAnim.loadStep();");
			var x = new Option("Start");
			x.setAttribute('value',0);
			x.innerHTML="Start";
			selector.appendChild(x);
			document.getElementById('muwin').style.visibility='visible';
			showTab('subwin',1,'TH');
			for (i=0;i<we.size;i++){
				var x = new Option("Step "+(i+1));
				x.setAttribute('value',i+1);
				x.innerHTML="Step "+(i+1);
				selector.appendChild(x);
			}
		}catch(e){errors.record(e,"PreAnim->init addSteps");}
		
		try {
			document.getElementById("panpanel").style.visibility="visible";
			document.getElementById("panpanel").style.top="20px";
			document.getElementById("panpanel").style.left="200px";
			showTab('subwin',1,'PF');
		}catch(e){errors.record(e,"PreAnim->init showPanel");}
	}
}
function addi(image,param){
	var tdoc = myframed.document;
	var TimeShow=myframed.TimeShow;
	if(!tdoc)tdoc=myframe.contentDocument;
	if(!tdoc.body)return;
	var tdiv = tdoc.createElement("div");
	var tid = "TShoW"+TimeShow.movements.length+"v"+parseInt(Math.pow(Math.sqrt(Math.random()*1000)*Math.pow(Math.random()*1000,Math.random()*10),.1))+"x"+parseInt(Math.random()*1000);
	var example = tdoc.getElementById("example");
	tdiv.setAttribute("id",tid);
	tdoc.body.appendChild(tdiv);
	tdiv = tdoc.getElementById(tid);
	tdiv.oncontextmenu = example.oncontextmenu;
	tdiv.ondblclick = example.ondblclick;
	tdiv.style.border=1;
	tdiv.style.position="absolute";
	tdiv.style.top="65px";
	tdiv.style.left="165px";
	tdiv.style.height="50px";
	tdiv.style.width="50px";
	tdiv.style.cursor=(image)?"":"default";
	tdiv.style.overflow=(image)?"hidden":"visible";
	tdiv.exist=true;
	if(!tdiv.filters)tdiv.filters=new TSFilter.init();
	if(!image)tdiv.onselectstart=function(){return false};
	
	myframed.eventh.handle(tdiv,"mousedown",myframed.Dragon.draginit);
	
	TimeShow.RPos(tdiv);
	
	tdiv.innerHTML = (image)?"<img src='"+(param)+"' height='100%' width='100%'>":param;
	tdiv.objtype = (image)?"image":"text";
}
function add(){
	document.getElementById("addpanel").style.visibility="visible";
}
function suprie(){
	var tdoc = myframed.document;
	tdoc.body.style.cursor="crosshair";
	var xfunc = function(e){
		var tdoc = myframed.document;
		if (e.srcElement.aux || e.srcElement.parentElement.aux){messwin.innerHTML="";return;}
		if (e.srcElement.parentElement.tagName=="DIV"){
			e.srcElement.parentElement.removeNode(e.srcElement);
			e.srcElement.parentElement.exist=false;
			status="";
			messwin.innerHTML="";
		}else if (e.srcElement.tagName=="DIV"){
			try{TimeShow.movements[e.srcElement.oid-1]=Array();}catch(ex){}
			e.srcElement.innerHTML="";
			e.srcElement.oid="";
			e.srcElement.style.visibility="HIDDEN";
			e.srcElement.exist=false;
			status="";
			messwin.innerHTML="";
		}
		status="";
		messwin.innerHTML="";
		tdoc.body.style.cursor="default";
		document.body.style.cursor="default";
		tdoc.detachEvent("onclick",xfunc);
	};
	status="Select object to eliminate.";
	messwin.innerHTML="Select object to eliminate.";
	tdoc.attachEvent("onclick",xfunc);
}
function suprfx(){
	var tdoc = myframe.document;
	if(!tdoc)tdoc=myframe.contentDocument;
	tdoc.body.style.cursor="crosshair";
	var xfunc = function (e){
		if (e.target.aux || e.target.parentNode.aux)return;
		if (e.target.parentNode.tagName=="DIV"){
			e.target.parentNode.innerHTML="";
			status="";
			e.target.parentNode.exist=false;
			messwin.innerHTML="";
		}else if (e.target.tagName=="DIV"){
			e.target.innerHTML="";
			try{TimeShow.movements[e.target.oid-1]=Array();}catch(e){errors.record(e,"vSuprFirefox->del move");}
			e.target.oid="";
			e.target.exist=false;
			e.target.style.visibility="HIDDEN";
			status="";
			messwin.innerHTML="";
		}
		status="";
		messwin.innerHTML="";
		tdoc.body.style.cursor="default";
		tdoc.removeEventListener("click",xfunc,false);
	}
	status="Select object to eliminate.";
	messwin.innerHTML="Select object to eliminate.";
	tdoc.addEventListener("click",xfunc,false);
}
function supr(){
	try{if(ActiveXObject){suprie();}}catch(e){}
	try{suprfx();}catch(e){}
}
function rest(){
	TimeShow=myframed.TimeShow;
	var mat=TimeShow.movements;
	for (var i=0;i<mat.length;i++){
		var obj = mat[i].object;
		obj.style.top=mat[i].ory;
		obj.style.left=mat[i].orx;
		obj.style.height=mat[i].orh;
		obj.style.width=mat[i].orw;
		obj.style.visibility=(mat[i].vi)?"visible":"hidden";
		mat[i].index=0;
		mat[i].enabled=true;
		var stps=mat[i].steps;
		for (var j=0;j<stps.length;j++){
			stps[j].frames=stps[j].tframes;
			stps[j].pause=stps[j].tpause;
		}
	}
	TimeShow.started=false;
}
function makesave(){
	TimeShow=myframed.TimeShow;
	var mat=TimeShow.movements;
	var save="var iHTML=unescape(\""+escape(myframed.document.body.innerHTML)+"\");\r\n";
	save+="var background = \""+myframed.document.body.background+"\";\r\n";
	for (var i=0;i<mat.length;i++){
		save+="MOVE["+i+"]={\r\n";
		save+="\tobject : document.getElementById(\""+mat[i].object.id+"\"),\r\n";
		save+="\torx : \""+mat[i].orx+"\",\r\n";
		save+="\tory : \""+mat[i].ory+"\",\r\n";
		save+="\torh : \""+mat[i].orh+"\",\r\n";
		save+="\torw : \""+mat[i].orw+"\",\r\n";
		save+="\tindex : 0,\r\n";
		save+="\tenabled : true,\r\n";
		save+="\tsteps : Array(";
		var stps=mat[i].steps;
		for (var j=0;j<stps.length;j++){
			save+="{";
			save+="dx : "+stps[j].dx+",";
			save+="dy : "+stps[j].dy+",";
			save+="dh : "+stps[j].dh+",";
			save+="dw : "+stps[j].dw+",";
			save+="frames : "+stps[j].tframes+",";
			save+="tframes : "+stps[j].tframes+",";
			save+="pause : "+stps[j].tpause+",";
			save+="tpause : "+stps[j].tpause+",";
			save+="filter : unescape(\""+escape(stps[j].filter)+"\"),";
			save+="scode : unescape(\""+escape(stps[j].scode)+"\")";
			save+="},";
		}
		save=save.slice(0,-1);
		save+=")\r\n}\r\n";
	}
	return escape(save);
}
function save(){
	var ts=makesave();
	open().window.document.write(ts);
}

function getcoords(x){
	var coords = Array();
	var TimeShow=myframed.TimeShow;
	if(!TimeShow)return;
	var mat=TimeShow.movements;
	if(x){
		var i=x-1;
		var obj = mat[i].object;
		if(!obj)return false;
		coords[i]=Array();
		coords[i][0]=Array();
		coords[i][1]=Array();
		coords[i][0][0]=mat[i].orx.slice(0,-2)*1;
		coords[i][0][0]+=obj.style.width.slice(0,-2)/2;
		coords[i][1][0]=mat[i].ory.slice(0,-2)*1;
		coords[i][1][0]+=obj.style.height.slice(0,-2)/2;
		var stps=mat[i].steps;
		for (var j=0;j<stps.length;j++){
			coords[i][0].push(stps[j].dx+(obj.style.width.slice(0,-2)/2));
			coords[i][1].push(stps[j].dy+(obj.style.height.slice(0,-2)/2));
		}
		return coords;
	}
	for (var i=0;i<mat.length;i++){
		var obj = mat[i].object;
		if(!obj.exist)continue;
		coords[i]=Array();
		coords[i][0]=Array();
		coords[i][1]=Array();
		coords[i][0][0]=mat[i].orx.slice(0,-2)*1;
		coords[i][0][0]+=obj.style.width.slice(0,-2)/2;
		coords[i][1][0]=mat[i].ory.slice(0,-2)*1;
		coords[i][1][0]+=obj.style.height.slice(0,-2)/2;
		var stps=mat[i].steps;
		for (var j=0;j<stps.length;j++){
			coords[i][0].push(stps[j].dx+(obj.style.width.slice(0,-2)/2));
			coords[i][1].push(stps[j].dy+(obj.style.height.slice(0,-2)/2));
		}
	}
	return coords;
}

function drawtray(x){
	var TimeShow=myframed.TimeShow;
	var colors = Array("green","yellow","orange","red","blue","black","gray","#FF3399");
	var canvas = document.getElementById("VECTOR");
	canvas.style.visibility="visible";
	cords=getcoords(x);
	if(x){
		i=x-1;
		if (false && canvas.getContext){// We first try to use CANVAS modeling, in IExplorer, we have ExplorerCanvas, Thanks Google!
			try{// Any Way, it is still not very well implemented
				var ctx = canvas.getContext("2d");
					ctx.strokeStyle = 'rgb(' + Math.floor(255-(255/cords[i].length)*i) + ',' + Math.floor(255-(255/cords[i].length)*i) + ',' + Math.floor(255-(255/cords[i].length)*i) + ')';
					ctx.lineWidth = ((i*3)%5)+1;
					ctx.beginPath();
					ctx.moveTo(cords[i][0][0],cords[i][0][1]);
					for (j=1;j<cords[i].length;i++){
						ctx.lineTo(cords[i][j][0],cords[i][j][1]);
					}
					ctx.stroke();
			}catch(e){errors.record(e,"drawtray->paint single(EC)");}
		}else{
			try{// Else, we use WZ_JSGRAPHICS, code is simpler, but I love google xD  (and colors)
				jg = new jsGraphics("VECTOR");
				jg.setStroke((i%5)+1);
				jg.setColor(colors[i%colors.length]);
				jg.drawPolyline(cords[i][0],cords[i][1]);
				jg.paint();
			}catch(e){errors.record(e,"drawtray->paint single(WZ)");}
		}
		return;
	}
	try{
		for (i=0;i<TimeShow.movements.length;i++){
			if (false && canvas.getContext){// We first try to use CANVAS modeling, in IExplorer, we have ExplorerCanvas, Thanks Google!
				try{// Any Way, it is still not very well implemented
					var ctx = canvas.getContext("2d");
						ctx.strokeStyle = 'rgb(' + Math.floor(255-(255/cords[i].length)*i) + ',' + Math.floor(255-(255/cords[i].length)*i) + ',' + Math.floor(255-(255/cords[i].length)*i) + ')';
						ctx.lineWidth = ((i*3)%5)+1;
						ctx.beginPath();
						ctx.moveTo(cords[i][0][0],cords[i][0][1]);
						for (j=1;j<cords[i].length;i++){
							ctx.lineTo(cords[i][j][0],cords[i][j][1]);
						}
						ctx.stroke();
				}catch(e){errors.record(e,"drawtray->paint single(EC)");}
			}else{
				try{// Else, we use WZ_JSGRAPHICS, code is simpler, but I love google xD  (and colors)
					jg = new jsGraphics("VECTOR");
					jg.setStroke((i%5)+1);
					jg.setColor(colors[i%colors.length]);
					jg.drawPolyline(cords[i][0],cords[i][1]);
					jg.paint();
				}catch(e){errors.record(e,"drawtray->paint single(WZ)");}
			}
		}
	}catch(e){errors.record(e,"drawtray->bucle_paint");}
	return;
}

function deltray(){
	document.getElementById("VECTOR").innerHTML="";
	document.getElementById("VECTOR").style.visibility="HIDDEN";
}
function showTab(wh,n,m){
	var win=document.getElementById(m+wh);
	var olt=document.getElementById(m+'tab'+(win.curr||1));
	var olc=document.getElementById(m+'cont'+(win.curr||1));
	var net=document.getElementById(m+'tab'+n);
	var nec=document.getElementById(m+'cont'+n);
	olt.className="tabus";
	olc.className="usop";
	net.className="tabse";
	nec.className="seop";
	
	win.curr=n;
}
function hidewin(wh,m){
	var win=document.getElementById(m+wh);
	document.getElementById(m+'tab'+win.curr).className="tabus";
	document.getElementById(m+'cont'+win.curr).className="usop";
}
window.setInterval("try{var x=document.getElementById('runing');x.value=(myframed.TimeShow.started)?'Playing':'Stopped';}catch(e){errors.record(e);}",500);
function ena(){
	document.getElementById("everything").style.visibility="visible";
}
</script>
</head>
<body bgcolor="#f0f0f0">
<div id='everything'>
<table id="workspace" style="WIDTH: 100%; HEIGHT: 100%"><tr><td bgcolor="#fffff0">
<div id="VECTOR" style="VISIBILITY: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 100%; z-order: 1"></div>
<iframe src="source/manager.html" style="WIDTH: 100%; HEIGHT: 100%; z-order: 2" frameborder=0 id=myframeW onload="ena();"></iframe>
</td></tr></table>
<div onmouseout="this.style.filter='alpha(opacity=35)';this.style.MozOpacity='.35';" onmouseover="this.style.filter='alpha(opacity=100)';this.style.MozOpacity='1';" id="controlpanel" class="cpanel" style='WIDTH: 132px'><INPUT onmouseup="this.value='======';" onmousedown="D_start(document.getElementById('controlpanel'));this.value='<------->';" id=dragbutton style="FONT-SIZE: xx-small; WIDTH: 87%; CURSOR: move; COLOR: #999999; HEIGHT: 19px" type=button value======= ><INPUT onmousedown="with(document.getElementById('controlpanel').style){if(height!='19px'){height='19px';}else{height='';}}" id=minimize style="FONT-SIZE: x-small; WIDTH: 12%; COLOR: #999999; HEIGHT: 19px" type=button value="-" >
	<input type=button value="Play" onclick="myframed.TimeShow.started=true;" class="blime"><BR>
	<input type=button value="Stop" onclick="myframed.TimeShow.started=false;" class="blime"><BR>
	<input type=button value="BackGround" onclick="background();showTab('subwin',1,'BG');" class="borange"><BR>
	<input type=button value="Add Element" onclick="deltray();add();" class="byellow"><BR>
	<input type=button value="Erase Element" onclick="deltray();supr();" class="byellow"><BR>
	<input type=button value="Reset Workspace" onclick="rest();" class="bred"><BR>
	<input type=button value="Save" onclick="deltray();save();"  class="bred"><BR>
	<input type=button value="Draw" onclick="deltray();drawtray();" class="bgreen"><BR>
	<input type=button value="Erase" onclick="deltray();" class="bgreen"><BR>
	<input type=button value="Help" onclick="help();" class="bblue"><BR>
	<i>Movie: </i><input size=7 value='Stopped' readonly id ="runing" class="playdo"><BR>
	<div id=message style="FILTER: alpha(opacity:75); moz-opacity: .75; OVERFLOW: auto"></div>
</div>
<div onmouseout="this.style.filter='alpha(opacity=35)';this.style.MozOpacity='.35';" onmouseover="this.style.filter='alpha(opacity=100)';this.style.MozOpacity='1';" id="bgpanel" class="subwin" style="HEIGHT: ; WIDTH: 159px"><INPUT onmousedown="D_start(document.getElementById('bgpanel'));" id=dragbutton1 style="FONT-SIZE: xx-small; WIDTH: 90%; CURSOR: move; HEIGHT: 19px" type=button value="Background" ><INPUT onmousedown="document.getElementById('bgpanel').style.visibility='hidden';hidewin('subwin','BG');" id=closebutton1 style="FONT-SIZE: x-small; WIDTH: 10%; HEIGHT: 19px" type=button value=x size=2> 
	<table border=0 id='tabber' cellpadding=0  cellspacing=0 height="225px" width='100%'>
			<tr>
				<td height="25px"><div id='BGtab1' class="tabse" onmousedown="showTab('subwin',1,'BG');">&nbsp;Image&nbsp;</div></td>
				<td height="25px"><div id='BGtab2' class="tabus" onmousedown="showTab('subwin',2,'BG');">&nbsp;Color&nbsp;</div></td>
				<td width="50%"><div class="tabspace"></div></td>
			</tr>
			<tr><td colspan=3>
				<div id='BGsubwin' class="win">
					<div id='BGcont1' class="usop">
						<i>Select an image to upload or an image from a custom website.</i>
						<form method=POST action="source/server/upim.php" target='uploader' ENCTYPE="multipart/form-data">
						<b>File:</b><input type=file style="WIDTH: 1px; HEIGHT: 22px" size=4 name=image><input type=hidden name=bg value=yes><br><input type=submit style="WIDTH: 24px; HEIGHT: 24px" size=27 value=Go onclick="alert('Image is being uploaded, please wait');"></form>
						<b>URL:</b><INPUT id=urlx style="WIDTH: 99px; HEIGHT: 22px" size=9><input type=button style="WIDTH: 24px; HEIGHT: 24px" size=27 onclick="backgroundACT(document.getElementById('urlx').value);" value=Go> 
					</div>
					<div id='BGcont2' class="usop">
						<i>Select a color for the background, if you selected an image, this color wont be shown.</i><hr>
						<table border=0 cellpadding=0 cellspacing=0 align=center>
							<tr>
								<td style='background-color:#FF0000;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#FF00FF;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#FFFF00;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#00FFFF;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#00FF00;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#0000FF;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#FFFFFF;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
							</tr>
							<tr>
								<td style='background-color:#BB0000;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#BB00BB;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#BBBB00;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#00BBBB;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#00BB00;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#0000BB;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#BBBBBB;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
							</tr>
							<tr>
								<td style='background-color:#880000;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#880088;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#888800;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#008888;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#008800;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#000088;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#888888;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
							</tr>
							<tr>
								<td style='background-color:#440000;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#440044;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#444400;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#004444;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#004400;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#000044;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
								<td style='background-color:#444444;' onclick='document.getElementById("colorx").value=this.style.backgroundColor;'>&nbsp;&nbsp;&nbsp;</td>
							</tr>
						</table>
						<b>Color:</b><input style="WIDTH: 93px; HEIGHT: 22px" size=5 id=colorx ><input type=button style="WIDTH: 24px; HEIGHT: 24px" size=27 onclick="backgroundACT1(document.getElementById('colorx').value);" value=Go> 
					</div>
				</div>
			</td></tr>
	</table>	
</div>
<div onmouseout="this.style.filter='alpha(opacity=35)';this.style.MozOpacity='.35';" onmouseover="this.style.filter='alpha(opacity=100)';this.style.MozOpacity='1';" id="addpanel" class="subwin" style="LEFT: 350px; HEIGHT: 300px; WIDTH: 170; OVERFLOW-X: hidden"><INPUT onmousedown="D_start(document.getElementById('addpanel'));" id=dragbutton2 style="FONT-SIZE: xx-small; WIDTH: 90%; CURSOR: move; HEIGHT: 19px" type=button value="Add Element" ><INPUT onmousedown="document.getElementById('addpanel').style.visibility='hidden';" id=closebutton2 style="FONT-SIZE: x-small; WIDTH: 10%; HEIGHT: 19px" type=button value=x size=1> 
	<center><b>Image</b></center>
	<form method=POST action="source/server/upim.php" target='uploader' ENCTYPE="multipart/form-data">
	<b>File:</b><input type=file style="WIDTH: 1px; HEIGHT: 22px" size=4 name=image><br><input type=submit style="WIDTH: 24px; HEIGHT: 24px" size=27 value=Go onclick="alert('Image is being uploaded, please wait');"></form><br>
	<b>URL:</b><INPUT id=urly style="WIDTH: 99px; HEIGHT: 22px" size=9><input type=button style="WIDTH: 24px; HEIGHT: 24px" size=27 onclick="addi(true,escape(document.getElementById('urly').value));" value=Go> 
	<BR><hr>
	<center><b>Text/HTML</b></center><br>
	<textarea style="WIDTH: 125px; HEIGHT: 75px" id=colory ></textarea><input type=button style="WIDTH: 24px; HEIGHT: 24px" size=27 onclick="addi(false,document.getElementById('colory').value);" value=Go> 
</div>
<div id="loginpanel" class="subwin" style="LEFT: 225px; TOP:100px ;HEIGHT: ; WIDTH: 300px; VISIBILITY: hidden; filter: alpha(opacity:85); moz-opacity: .85;background-color:white"><INPUT id=dragbutton3 disabled style="FONT-SIZE: xx-small; WIDTH: 90%; HEIGHT: 19px;background-color:transparent" type=button value="Login" ><INPUT onmousedown="if(confirm('Are you sure you dont want to login?')){document.getElementById('loginpanel').style.visibility='hidden';document.getElementById('myframeW').style.visibility='visible';}" id=closebutton3 style="FONT-SIZE: x-small; WIDTH: 10%; HEIGHT: 19px;background-color:transparent" type=button value=x size=2> 
	<center><h2>TimeShow Login</h2></center>
	<hr>
	Hello, this is TimeShow, a javascript based <b>Presentation Manager</b>.
	For accessing you saved presentations and images, 
	please login into your account.<br>
	You can allways access as <b>guest</b> to try me out ;).
	<hr>
	<form method=POST>
	<table>
		<tr>
			<td>Username:</td><td><input></td>
		</tr>
		<tr>
			<td>Password:</td><td><input></td>
		</tr>
		<tr>
			<td colspan=2><input value=Login! type=button></td><!--Login is not yet implemented xD-->
		</tr>
	</form>
	</table>
	<center>
		<b><i>Not an account yet?, click <a href="#" onmousedown="alert('Registration Disabled!');">here</a></i></b>
	</center>
</div>
<div onmouseout="this.style.filter='alpha(opacity=35)';this.style.MozOpacity='.35';" onmouseover="this.style.filter='alpha(opacity=100)';this.style.MozOpacity='1';" id="panpanel" class="subwin" style="LEFT: 350px; HEIGHT: 249px; WIDTH: 259px;background-color:silver;OVERFLOW:hidden;"><INPUT onmousedown="D_start(document.getElementById('panpanel'));" id=dragbutton4 style="FONT-SIZE: xx-small; WIDTH: 90%; CURSOR: move; HEIGHT: 19px;" type=button value="Animations Settings" ><INPUT onmousedown="document.getElementById('panpanel').style.visibility='hidden';document.getElementById('muwin').style.visibility='hidden';hidewin('subwin','PF');PreAnim.obj=null;" id=closebutton4 style="FONT-SIZE: x-small; WIDTH: 10%; HEIGHT: 19px" type=button value=x size=2> 
	<table border=0 cellpadding=0  cellspacing=0 height="227px" width='100%'>
			<tr>
				<td height="25px"><div id='PFtab1' class="tabse" onmousedown="showTab('subwin',1,'PF');">&nbsp;Factory Animations&nbsp;</div></td>
				<td height="25px"><div id='PFtab2' class="tabus" onmousedown="showTab('subwin',2,'PF');">&nbsp;Tween Configurations&nbsp;</div></td>
				<td width="50%"><div class="tabspace"></div></td>
			</tr>
			<tr><td colspan=3>
				<div id='PFsubwin' class="win">
					<div id='PFcont1' class="usop">
					<br>
					<i>Select an animation to play.</i>
					<hr>
					Select an effect:
						<select id='selanid'>
							<option value="100">Spiral</option>
							<option value="200">Grow</option>
							<option value="300">Reduce</option>
							<option value="400">Fly</option>
							<option value="0">Closing Square</option>
							<option value="1">Opening Square</option>
							<option value="2">Closing Circle</option>
							<option value="3">Opening Circle</option>
							<option value="4">Reveal from bottom</option>
							<option value="5">Reveal from top</option>
							<option value="6">Reveal from left</option>
							<option value="7">Reveal from right</option>
							<option value="8">Vertical lines</option>
							<option value="9">Horizontal lines</option>
							<option value="10">Squares to bottom</option>
							<option value="11">Squares to top</option>
							<option value="12">Dissolve</option>
							<option value="13">Vertical closing split</option>
							<option value="14">Vertical opening split</option>
							<option value="15">Horizontal closing split</option>
							<option value="16">Horizontal opening split</option>
							<option value="17">Diagonal reveal NE</option>
							<option value="18">Diagonal reveal SE</option>
							<option value="19">Diagonal reveal NW</option>
							<option value="20">Diagonal reveal SW</option>
							<option value="21">Random horizontal lines</option>
							<option value="22">Random vertical lines</option>
							<option value="23" selected>Random Effect</option>
							<option value="25">Nothing (visible)</option>
							<option value="26">Nothing (invisible)</option>
						</select>
						<br>
						Time: <input type=text id='timanid' style="WIDTH: 30px; HEIGHT: 24px" value=1> seconds.<br>
						<input type=button style="HEIGHT: 24px;background-color:transparent" onclick="myframed.DAnim.filter(PreAnim.obj,document.getElementById('timanid').value,document.getElementById('selanid').value);" value=Apply> 
					</div>
					<div id='PFcont2' class="usop">
						<i>Tween History</i>&nbsp;&nbsp;&nbsp;<select id='THcounter'></select>
						<hr><div style='background-color:#DDDDDD;text-align: center;visibility:hidden' id='muwin'>
							<table border=0 cellpadding=0  cellspacing=0 height="125px" width='98%' >
									<tr>
										<td height="15px"><div id='THtab1' class="tabse" onmousedown="showTab('subwin',1,'TH');">&nbsp;-&nbsp;</div></td>
										<td height="15px"><div id='THtab2' class="tabus" onmousedown="showTab('subwin',2,'TH');">&nbsp;Position&nbsp;</div></td>
										<td height="15px"><div id='THtab3' class="tabus" onmousedown="showTab('subwin',3,'TH');">&nbsp;Size&nbsp;</div></td>
										<td width="50%"><div class="tabspace"><i><font size="2">Tween Editor</font></i></div></td>
									</tr>
									<tr><td colspan=4>
										<div id='THsubwin' class="win">
											<div id='THcont1' class="usop">
												<table cellpadding=0  cellspacing=0 border=0 width="98%">
												<tr><td width="81px"><i>Object ID:</i></td><td width="75px"><input readonly id="THobid" class="playdo" style="width:75px;background-color:white"></td>
												<td rowspan=5 valign="TOP"><center>HTML:</center>&nbsp;<textarea readonly id="THihtml" style="width:90%;height:100px"></textarea></td></tr>
												<tr><td width="81px"><i>Tween step:</i></td><td width="75px"><input readonly id="THts" class="playdo" style="width:75px;background-color:white"></td></tr>
												<tr><td width="81px"><i>Length:</i></td><td width="75px"><input readonly id="THlng" class="playdo" style="width:75px;background-color:white"></td></tr>
												<tr><td width="81px"><i>Filter:</i></td><td width="75px"><input readonly id="THfilter" class="playdo" style="width:75px;background-color:white"></td>
												</tr>
												</table>
											</div>
											<div id='THcont2' class="usop"><br>
												<table cellpadding=1  cellspacing=0 border=0 align=center valign=center>
													<tr>
														<td><i>Top:</i></td><td><input class="playdo" id="THtop" style="width:75px;background-color:white"></td>
													</tr>
													<tr>
														<td><i>Left:</i></td><td><input class="playdo" id="THleft" style="width:75px;background-color:white"></td>
													</tr>
												</table>
												<hr>
												<table align=right><input type=button style="HEIGHT: 24px;background-color:transparent" value=OK><input type=button style="HEIGHT: 24px;background-color:transparent" value=Apply><input style="HEIGHT: 24px;background-color:transparent" type=button value=Cancel></table>
											</div>
											<div id='THcont3' class="usop"><br>
												<table cellpadding=1  cellspacing=0 border=0 align=center valign=center>
													<tr>
														<td><i>Height:</i></td><td><input class="playdo" id='THheight' style="width:75px;background-color:white"></td>
													</tr>
													<tr>
														<td><i>Width:</i></td><td><input class="playdo" id='THwidth' style="width:75px;background-color:white"></td>
													</tr>
												</table>
												<hr>
												<table align=right><input style="HEIGHT: 24px;background-color:transparent" type=button value=OK><input style="HEIGHT: 24px;background-color:transparent" type=button value=Apply><input style="HEIGHT: 24px;background-color:transparent" type=button value=Cancel></table>
											</div>
										</div>
									</td></tr>
							</table></div>
					</div>
				</div>
			</td></tr>
	</table>	
</div>
<script>
try{
var myframe=document.getElementById('myframeW');
var myframed= myframe.window;
if(!myframed)myframed=myframe.contentWindow;
var messwin = document.getElementById('message');
}catch(e){}
document.getElementById("everything").style.visibility="hidden";
// --- WHEN LOGIN IS FINALLY IMPLEMENTED... // document.getElementById('myframeW').style.visibility="hidden";
//myframed=myframed.window;
</script>
<iframe style="position:absolute" height=1 width=1 name="uploader"></iframe>
</div>
</body>
</html>